<template>
  <div class="box">
    <div class="center" v-if="this.data">
      <span>
        当前位置><span @click="goBack">精品推荐</span>>{{
          this.data[0].bname
        }}</span
      >
      <hr />
      <div class="book" v-if="this.data">
        <div class="left">
          <img :src="this.data[0].bsrc" alt="" />
        </div>
        <div class="right">
          <h2 class="item">{{ this.data[0].bname }}</h2>
          <h3 class="item">作者:{{ this.data[0].author }}</h3>
          简介:
          <p class="item">
            {{ this.data[0].bjj }}
          </p>
          <span class="item">推荐语:{{ this.data[0].bwords }}</span>
          <h3 class="item">
            推荐人:{{ this.data[0].name }}
            <em @click="addGz" v-once-click class="el-icon-message-solid"></em>
          </h3>
        </div>
      </div>
      <hr />
      <div class="top">
        <div class="top-top">
          <h2>猜你喜欢</h2>
          <span @click="getOther" class="top-up">
            换一批
            <em class="el-icon-refresh"></em>
          </span>
        </div>
        <hr />
        <div class="top-center" v-if="this.data2">
          <div
            class="top-center-inner"
            v-for="items in this.data2"
            :key="items.bid"
          >
            <img :src="items.bsrc" alt="" />
            <span> {{ items.bname }}{{ items.author }} </span>
          </div>
        </div>
        <hr />
      </div>
      <div class="talk">
        <div class="top-top">
          <h2>评论</h2>
          <span class="top-up">
            我有一言,请诸位静听! <em class="el-icon-thumb"></em
          ></span>
        </div>
        <hr />
        <div v-for="items in this.data3" :key="items.bdid">
          <div class="down">
            <div class="uheader">
              <img :src="items.rphoto" alt="" />
            </div>
            <div class="utalks">
              <span class="uname">{{ items.rname }}</span>
              <span class="uword">{{ items.reply }}</span>
              <div class="time-pl">
                <span class="two">
                  <em
                    @click="addDz(items.reid)"
                    v-once-click
                    class="el-icon-trophy"
                    >{{ items.rdianzan }}</em
                  >
                </span>
              </div>
            </div>
          </div>
          <hr />
        </div>
        <div class="pagination">
          <button @click="minusPage" :disabled="this.page == 1">上一页</button>
          <span>{{ page }}</span>
          <button @click="addPage" :disabled="this.maxPage == page">
            下一页
          </button>
          <span>共{{ maxPage }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      data2: "",
      data3: "",
      num: 0,
      page: 1,
      maxPage: 1,
    };
  },
  mounted() {
    this.getData();
    this.getOther();
    this.getChat();
  },
  methods: {
    // 挂载时(页面出生,显示),自动触发请求
    // 发送请求
    getData() {
      const url =
        `http://127.0.0.1:3000/v1/library/bookdetails/` + this.$route.params.id;
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
      });
    },
    getOther() {
      const url2 = "http://127.0.0.1:3000/v1/library/maybelike";
      console.log(url2);
      this.axios.get(url2).then((res) => {
        this.data2 = res.data;
        console.log("this.data2:", this.data2);
        this.num = Math.floor(Math.random() * (this.data2.length - 6));
        console.log(this.num);
        this.data2 = this.data2.slice(this.num, this.num + 5);
        console.log("this.data2:", this.data2);
      });
    },
    getChat() {
      const url3 =
        `http://127.0.0.1:3000/v1/library/bookchat/` + this.$route.params.id;
      console.log(url3);
      this.axios.get(url3).then((res) => {
        this.data3 = res.data;
        console.log("this.data3:", this.data3);
        this.maxPage = Math.ceil(this.data3.length / 10);
        this.data3 = this.data3.slice(10 * (this.page - 1), 10 * this.page);
        console.log(this.data3);
      });
    },
    addGz() {
      const url4 =
        `http://127.0.0.1:3000/v1/library/updateguanzhu/` +
        this.$route.params.id;
      console.log(url4);
      this.axios.put(url4).then((res) => {
        console.log("关注成功！");
      });
    },
    addDz(reid) {
      const url4 = "http://127.0.0.1:3000/v1/library/updatebookdetails/dianzan";
      const params = `reid=${reid}&bid=${this.$route.params.id}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("点赞成功！");
        this.getChat();
      });
    },
    goBack() {
      this.$router.back();
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  // user-select: none;
}
.box {
  width: 1200px;
  margin: 0 auto;
  .center {
    width: 1200px;
    display: flex;
    flex-direction: column;
    > span {
      margin: 15px 20px;
    }

    .book {
      width: 1200px;
      display: flex;
      padding: 15px 0;
      .left {
        // border: 1px solid black;
        display: flex;
        align-items: center;
        img {
          width: 350px;
          // border: 1px solid black;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        margin: 10px 10px;
        // border: 1px solid black;
        .item {
          margin: 15px 0;
        }
        p {
          line-height: 150%;
          text-indent: 30px;
        }
        h3 {
          display: flex;
          justify-content: flex-end;
          .el-icon-message-solid {
            padding-left: 20px;
          }
        }
      }
    }

    .top {
      width: 1200px;

      .top-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          margin: 10px 20px;
        }
      }
      .top-up {
        display: flex;
        justify-content: flex-end;
        margin: 10px 20px;
      }
      .top-center {
        display: flex;
        justify-content: space-between;

        .top-center-inner {
          display: flex;
          flex-direction: column;
          // width: 19%;
          img {
            width: 230px;
            height: 320px;
          }
          span {
            text-align: center;
            margin: 10px 0;
          }
        }
      }
    }

    .talk {
      width: 1200px;

      .top-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          margin: 10px 20px;
        }
        .top-up {
          margin: 10px;
          padding: 10px;
          border-radius: 5px;
          background-color: #46aaff;
          color: white;
        }
      }
      .down {
        width: 100%;
        display: flex;
        img {
          width: 50px;
          height: 50px;
          margin: 20px;
          border-radius: 50%;
        }
        .utalks {
          width: 100%;
          display: flex;
          flex-direction: column;
          .uname {
            font-size: 14px;
            color: #999;
            margin: 20px 0;
          }
          .uword {
            margin: 15px 0;
            padding-right: 20px;
          }

          .time-pl {
            width: 100%;
            display: flex;
            justify-content: flex-end;

            .two {
              em {
                padding: 0 20px 15px 0;
              }
            }
          }
        }
      }
      .more {
        text-align: center;
        margin: 15px 0;
      }
    }
  }
}
.pagination {
  text-align: center;
  padding: 15px;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}
</style>
